<template>
	<div class="Odetails">
		<div class="top">
			<van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
		</div>
		<div>
			<div class="dimg1">
				<img :src="detailsInfo.image1" />
			</div>
			<div class="dp2">
				<p>{{detailsInfo.name}}</p>
				<p>{{detailsInfo.presentPrice | rmb}}</p>
			</div>
			<div class="dswitch">
				<van-tabs v-model="active">
					<van-tab title="商品详情">
						<div class="dimgAll" v-html="detailsInfo.detail">

						</div>
					</van-tab>
					<van-tab title="评论">内容 2</van-tab>
				</van-tabs>
			</div>

		</div>
		<div class="twobtn">
			<button class="btn1" @click="goBuy()">加入购物车</button>
			<button class="btn2">直接购买</button>
		</div>
	</div>
</template>

<script>
	import {
		getDetailGoodsInfo
	} from '@/commonApi/request.js';
	import {
		Dialog
	} from 'vant';
	export default {
		name: "goodsDetails",
		data() {
			return {
				active: 2,
				detailsInfo: {}
			}
		},
		props: ["id"],
		methods: {

			async getGoodsInfo() {
				let _self = this
				let config = {
					goodsId: _self.id
				}
				let {
					data
				} = await getDetailGoodsInfo(config)
				_self.detailsInfo = data.data
				console.log(data)
			},
			onClickLeft() {

				window.history.back()
			},
			goBuy() {
				Dialog.alert({
					message: '确认购买' + this.detailsInfo.name + '?',
				}).then(() => {
					this.$store.dispatch("addTo", {
						ID: this.detailsInfo.id,
						image1: this.detailsInfo.image1,
						presentPrice: this.detailsInfo.presentPrice,
						name: this.detailsInfo.name
					})
				});

			}
		},
		created() {
			this.getGoodsInfo()
		}
	}
</script>

<style lang="scss">
	.Odetails {
		.top {
			.van-nav-bar__left {
				font-size: 16px;
			}

			.van-nav-bar__title {
				font-size: 18px;
				font-weight: 600;
			}
		}

		.dimg1 {
			width: 375px;
			height: 375px;
			border-bottom: 5px solid #ccc;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.dp2 {
			font-size: 18px;
			font-weight: 500;
			border-bottom: 2px solid #ccc;

			p {
				margin: 5px;
			}
		}

		.dswitch {
			.van-tab__text {
				font-size: 17px;
				font-weight: 500;
			}

			.dimgAll {
				width: 400px;
				height: 100%;
				vertical-align: middle !important;

				img {
					vertical-align: middle !important;
				}
			}

		}

		.twobtn {
			display: flex;
			justify-content: space-between;
			color: white;
			font-size: 18px;

			.btn1 {
				width: 180px;
				height: 50px;
				line-height: 50px;
				background-color: green;
				border-radius: 5px;
				margin-left: 5px;
			}

			.btn2 {
				width: 180px;
				height: 50px;
				line-height: 50px;
				background-color: red;
				border-radius: 5px;
				margin-right: 5px;
			}

		}
	}
</style>
